<template>
  <div class="component-login">
    <div class="logo">
      <img src="@/assets/images/logo.png" alt="" />
    </div>
    <div class="component-login-title">登录账号</div>
    <div class="component-login-desc">赶快来登录一下吧</div>
    <div class="formItem">
      <input type="text" placeholder="请输入手机号" />
    </div>
    <div class="formItem">
      <input type="text" placeholder="请输入密码" />
    </div>
    <div class="formItem-tip">
      忘记密码？
      <div class="activeButton">重置密码</div>
    </div>
    <div class="loginButton" @click="login">登录</div>
    <div class="formItem-tip">
      没有账号？
      <div class="activeButton">注册账号</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const login = () => {
      router.push({
        path: "/",
      });
    };
    return {
      login,
    };
  },
});
</script>

<style lang="less" >
.component-login {
  background: url("~@/assets/images/homeImg.jpg");
  background-size: 100% 100%;
  min-height: 100vh;
  padding-top: 108px;
  padding-left: 48px;
  padding-right: 70px;
  padding-bottom: 108px;
  box-sizing: border-box;
  .logo {
    width: 188px;
    img {
      width: 100%;
    }
  }
  &-title {
    font-size: 52px;
    font-family: Helvetica;
    color: #ffffff;
    line-height: 62px;
    margin-top: 38px;
  }
  &-desc {
    margin-top: 22px;
    line-height: 52px;
    font-size: 32px;
    font-family: Helvetica;
    color: #ffffff;
  }
  .formItem {
    height: 112px;
    background: #ffffff;
    border-radius: 56px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    margin-top: 64px;
    .input {
      height: 40px;
    }
    &-tip {
      height: 40px;
      font-size: 32px;
      font-family: Helvetica;
      color: #ffffff;
      line-height: 38px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 48px;
      .activeButton {
        color: #f6a44e;
      }
    }
  }
  .loginButton {
    margin-top: 66px;
    height: 110px;
    background: #f6a44e;
    border-radius: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-family: Helvetica;
    color: #ffffff;
  }
}
</style>